<template>
  <div class="order">
    <app-header>
      <img slot="title" @click="prev" src="../assets/上一步.png" alt="">
      <p slot="city">我的订单</p>
    </app-header>
    <div class="container" ref="wrapper">
      <div>
        <div class="order-item" v-for="(item, index) in orderArr" :key="index">
          <div class="order-item__top">
            <div class="top__left">
              <img :src="imgUrl + item.restaurant_image_url" alt="">
            </div>
            <div class="top__right">
              <p>
                <span>{{item.restaurant_name}}</span>
                <img src="../assets/下一步.png" alt="">
                <span class="span">已送达</span>
              </p>
              <p>{{item.formatted_created_at}}</p>
            </div>
          </div>
          <div class="order-item__down">
            <div class="down-top">
              <p>和路雪梦龙红覆盆子口味冰淇淋制品...</p>
              <p>
                <span>￥</span>
                23.5
              </p>
            </div>
            <div class="down-bottom">
              <div class="down-blessing">送祝福</div>
              <div class="down-another">再来一单</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-see">
      查看三个月前的外卖订单
      <img src="../assets/下箭头.png" alt="">
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import AppFooter from './AppFooter.vue'
import AppHeader from './AppHeader.vue'
import { state } from '../store'
import BScroll from 'better-scroll'

export default {
  name: 'Order',
  data () {
    return {
      orderArr: [],
      imgUrl: 'https://elm.cangdu.org/img/'
    }
  },
  components: { AppFooter, AppHeader },
  created () {
    this.$http.Orders({
      user_id: 1,
      limit: 5,
      offset: 0
    }).then(res => {
      this.orderArr = res.data
      console.log(res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    prev () {
      this.$router.go(-1)
    }
  },
  mounted() {
    this.scroller = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true,
    })
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .order{
    width: 100%;
    height: 1342px;
    background-color: #f5f5f5;
    .container{
      height: 950px;
      overflow: hidden;
      margin-top: 20px;
      .order-item{
        width: 90%;
        height: 290px;
        margin: 20px auto 35px;
        background-color: #fff;
        border-radius: 15px;
        .order-item__top{
          width: 90%;
          height: 118px;
          margin: 0px auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .top__left{
            width: 65px;
            height: 65px;
            border-radius: 10px;
            img{
              width: 100%;
            }
          }
          .top__right{
            width: 520px;
            height: 118px;
            padding: 30px 0px 15px 0px;
            box-sizing: border-box;
            border-bottom: 1px solid #ddd;
            p:nth-child(1){
              font-weight: bold;
              span:nth-child(1){
                font-size: 27px;
                color: #333;
              }
              img{
                width: 25px;
                vertical-align: middle;
              }
              .span{
                float: right;
                margin-top: 2px;
                color: #333;
                font-size: 22px;
                font-weight: normal;
              }
            }
            p:nth-child(2){
              margin-top: 10px;
              font-size: 19px;
              color: #8a8a8a;
            }
          }
        }
        .order-item__down{
          width: 90%;
          height: 170px;
          margin: 0px auto;
          padding: 25px 0px 26px 0px;
          box-sizing: border-box;
          text-align: right;
          .down-top{
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            p:nth-child(1){
              font-size: 23px;
              color: #343434;
              margin-left: 85px;
            }
            p:nth-child(2){
              font-size: 23px;
              color: #333;
              span{
                font-size: 15px;
                color: #333;
              }
            }
          }
          .down-bottom{
            width: 100%;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .down-blessing{
              width: 115px;
              text-align: center;
              border: 1px solid #ddd;
              border-radius: 5px;
              padding: 12px 0px;
              font-size: 25px;
              color: #343434;
              box-sizing: border-box;
              margin-right: 20px;
            }
            .down-another{
              width: 135px;
              text-align: center;
              border: 1px solid #00a1ff;
              border-radius: 5px;
              padding: 12px 0px;
              box-sizing: border-box;
              font-size: 25px;
              color: #00a1ff;
            }
          }
        }
      }
    }
    .order-see{
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 25px;
      color: #999;
      margin: 36px auto 0px;
      img{
        width: 25px;
        vertical-align: middle;
      }
    }
  }
</style>
